<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>restful实现-fetch和java</title>
    <link
      href="https://cdn.bootcdn.net/ajax/libs/twitter-bootstrap/4.5.2/css/bootstrap.css"
      rel="stylesheet"
    />

    <script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.6.11/vue.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/vue-router/3.4.3/vue-router.js"></script>
    <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
  </head>
  <body>
    <!-- 与文座在司天测试前后端分离restful API/2020年8月14日-->

    <div class="container mt-5">
      <div class="row">
        <div class="col-sm">
          <input type="text" class="id" placeholder="id" style="width: 100%;" />
          <input
            type="text"
            class="uname"
            placeholder="uname"
            style="width: 100%; margin-top: 10px;"
          />
          <input
            type="text"
            class="age"
            placeholder="age"
            style="width: 100%; margin-top: 10px;"
          />
        </div>
      </div>
      <div class="row mt-3">
        <div class="col-sm">
          <button class="btn btn-primary" id="delete">
            delete删除指定用户信息
          </button>
        </div>
        <div class="col-sm">
          <button class="btn btn-primary" id="put">
            put修改用户指定用户信息
          </button>
        </div>
        <div class="col-sm">
          <button class="btn btn-primary" id="post">
            post创建添加用户数据
          </button>
        </div>
        <div class="col-sm">
          <button class="btn btn-primary" id="get">
            get查询所有指定id的user
          </button>
        </div>
        <div class="col-sm">
          <button class="btn btn-primary" id="getAll">
            getAll查询所有users
          </button>
        </div>
      </div>
    </div>
    <div id="app"></div>

    <script>
      const vm = new Vue({
        el: "#app",
        data: {
          list: [],
        },
      });

      /*fetch实现get请求*/
      $("#getAll").click(function () {
        console.log("getUsers");
        fetch("http://192.168.0.125:8080/")
          .then((response) => response.json())
          .then((res) => {
            console.log(res);
            // vm.list = res;
          })
          .catch((e) => console.log("Oops, error", e));
      });
      /*post add数据*/
      $("#post").click(function () {
        console.log("post");
        console.log($(".id").val());
        console.log($(".uname").val());
        console.log($(".age").val());

        fetch("http://192.168.0.125:8080/user", {
          method: "post",
          // mode: "cors", //跨域请求
          headers: {
            "Content-Type": "application/json",
          },
          body: JSON.stringify({
            id: $(".id").val(),
            name: $(".uname").val(),
            age: $(".age").val(),
          }),
        })
          .then((response) => response.json())
          .then((res) => {
            console.log(res);
            // vm.list = res;
          })
          .catch((e) => console.log("Oops, error", e));
      });
      /*fetch实现get id查询指定数据*/
      $("#get").click(function () {
        console.log("查询指定id");
        fetch("http://192.168.0.125:8080/GET/1", {
          type: "GET",
        })
          .then((response) => response.json())
          .then((res) => {
            console.log(res);
            // vm.list = res;
          })
          .catch((e) => console.log("Oops, error", e));
      });
      /*fetch实现put修改数据*/
      $("#put").click(function () {
        console.log("putUsers");
        fetch("http://192.168.0.125:8080/user/1", {
          method: "PUT",
          headers: {
            "Content-Type": "application/json",
          },
          body: JSON.stringify({
            id: $(".id").val(),
            name: $(".uname").val(),
            age: $(".age").val(),
          }),
        })
          .then((response) => response.json())
          .then((res) => {
            console.log(res);
            // vm.list = res;
          })
          .catch((e) => console.log("Oops, error", e));
      });

      /*fetch实现delete*/
      $("#delete").click(function () {
        fetch("http://192.168.0.125:8080/DELETE/22", {
          type: "GET", //要用get
        })
          .then((rawdata) => rawdata.json())
          .then((res) => {
            console.log(res);
          });
      });

      /*fetch实现post请求*/
      fetch("http://192.168.0.125:8080/testuser", {
        method: "POST",
        // mode: "cors", //跨域请求
        headers: {
          "Content-Type": "application/json",
        },
        body: JSON.stringify({
          id: "XXX",
        }),
      })
        .then((response) => response.json())
        .then((res) => {
          console.log(res);
          vm.list = res;
        })
        .catch((e) => console.log("Oops, error", e));
    </script>
  </body>
</html>
